---
permalink: "/ui/ui-elements/section-list/keyboard-dismiss/index.xml"
tags: "UI/UI Elements/Section List"
hv_title: "Keyboard: Dismiss on Drag"
hv_button_behavior: "back"
---
{% extends 'templates/base.xml.njk' %}
{% from 'macros/text-field/index.xml.njk' import text_field %}

{% block container %}
  <section-list keyboard-dismiss-mode="on-drag">
    <item key="field" style="item">
      {{ text_field("field", {"auto-focus":"true", "placeholder":"Scroll!"}) }}
    </item>
    <section-title style="list-header">
      <text style="list-header-text">Section 1</text>
    </section-title>
    {% for item in range(1, 11) %}
      <item key="{{ item }}" style="item">
        <text style="item-label">List {{ item }}</text>
      </item>
    {% endfor %}

    <section-title style="list-header">
      <text style="list-header-text">Section 2</text>
    </section-title>
    {% for item in range(11, 21) %}
      <item key="{{ item }}" style="item{% if loop.last %} item-last{% endif %}">
        <text style="item-label">List {{ item }}</text>
      </item>
    {% endfor %}
  </section-list>
{% endblock %}
